<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2023/9/5
  Time: 9:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Register</title>
</head>
<link rel="stylesheet" href="/css/register.css">
<body>
<div class="root">
    <h1 style="text-align: center;margin-top: 80px">用户注册</h1>
    <div class="box1">
        <form action="${pageContext.request.contextPath }/register" method="post">
            <label>账&ensp;&ensp;&ensp;&ensp;号：</label>
            <input type="text" name="user_name" id="user_name" placeholder="请输入账号">
            <br>
            <label>密&ensp;&ensp;&ensp;&ensp;码：</label>
            <input type="password" name="password" id="password" placeholder="请输入密码">
            <br>
            <label>确认密码：</label>
            <input type="password" id="passwords" placeholder="确认密码">
            <br>
            <label>姓&ensp;&ensp;&ensp;&ensp;名：</label>
            <input type="text" name="real_name" id="real_name" placeholder="请输入真实姓名">
            <br>
            <label>生&ensp;&ensp;&ensp;&ensp;日：</label>
            <input  type="date" name="birthday" id="birthday">
            <br>
            <label>电&ensp;&ensp;&ensp;&ensp;话：</label>
            <input type="text" name="phone" id="phone" placeholder="请输入电话">
            <br>
            <label>地&ensp;&ensp;&ensp;&ensp;址：</label>
            <input type="text" name="address" id="address" placeholder="请输入地址">
            <br>
            <%--    验证码    --%>
<%--            <a href="" onclick="changeImg()">--%>
<%--                <img id="img" src="${pageContext.request.contextPath }/verificationCode.do">--%>
<%--            </a>--%>
            <img id="img" src="${pageContext.request.contextPath }/verificationCode.do" onclick="changeImg()">
            <input id="code" type="text" placeholder="输入验证码">
            <br>
            <input style="background-color: chartreuse;" type="submit" value="注册"
                   onclick="return checkVerificationCodeCode()&&checkNull()&&checkPassword()">
            <br>

<%--            <h4><a href="/index.jsp">返回</a></h4>--%>
        </form>
        <h3><a href="/toLogin"><button>已有账号？ 去登录！</button></a></h3>
    </div>
</div>
</body>
<script>

    <%--  点击链接更换图片  --%>

    function changeImg() {
        let img = document.getElementById("img");
        img.src = "${pageContext.request.contextPath }/verificationCode.do?date=" + new Date();
    }

    //获取cookie中的验证码
    function getCookie(cookie_name) {
        let allCookies = document.cookie;
        let cookie_pos = allCookies.indexOf(cookie_name);
        if (cookie_pos != -1) {
            cookie_pos += cookie_name.length + 1;
            let cookie_end = allCookies.indexOf(";", cookie_pos);
            if (cookie_end == -1) {
                cookie_end = allCookies.length;
            }
            return unescape(allCookies.substring(cookie_pos, cookie_end));
        }
        return null;
    }

    //验证输入的验证码是否正确
    function checkVerificationCodeCode() {
        let v = document.getElementById("code");
        if (getCookie("v_c_v") == v.value) {
            return true;
        } else {
            alert("验证码错误！");
            return false;
        }
    }

    //判断输入内容不为空
    function checkNull() {
        let user_name = document.getElementById("user_name").value;
        let password = document.getElementById("password").value;
        let birthday = document.getElementById("birthday").value;
        if (user_name == null || user_name == "" || password == null || password == "" || birthday == null || birthday == "") {
            alert("用户名、密码、生日不能为空！");
            return false;
        } else {
            return true;
        }
    }

    //判断密码是否为空
    function checkPassword() {
        let a = document.getElementById("password").value;
        let b = document.getElementById("passwords").value;
        if (a != b) {
            alert("两次密码不一致！");
            return false;
        } else {
            return true;
        }
    }
</script>
</html>
